<!DOCTYPE html>
<html>

<head>
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge'>
   <title>Smart Temperature Slider</title>
   <meta name='viewport' content='width=device-width, initial-scale=1'>
  <link rel='stylesheet' type='text/css' media='screen' href='../assets/css/temp_slider.css'> 
   <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.5/utils/Draggable.min.js"></script>
  
   
   
</head>

<body>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 600">
        <defs>
          <linearGradient id="liquidGrad" x1="557" y1="150" x2="557" y2="546" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#FF0909"/>
            <stop offset="0.2" stop-color="#F3481A"/>
            <stop offset="0.5" stop-color="#FABA2C"/>
            <stop offset="1" stop-color="#00BCF2"/>
          </linearGradient>
      <rect id="tube" x="357" y="150" width="86" height="400" rx="43" ry="43"/>   
          <clipPath id="liquidMask">
              <use xlink:href="#tube" class="liquidMask" />
          </clipPath>
         <clipPath id="tubeMask">
              <use xlink:href="#tube" class="liquidMask" />
          </clipPath>
         <path id="liquid" d="M757,552v490H357V552c50,0,50,20,100,20s50-20,100-20,50,20,100,20S707,552,757,552Z" />
      <mask id="gradMask">   
      
            <use xlink:href="#liquid" class="liquid" x="0" fill="#FCEFD6" />
            <use xlink:href="#liquid" class="liquid" x="0" fill="#EEE" opacity="0.7"/>
       
          </mask>
        </defs>
        
        
          <g class="whole" transform="translate(0, -40)">
      
                 <use xlink:href="#tube" class="tubeBg" fill="#C8D9D3" opacity="0.61"/>
         
            <g class="dragger" transform="translate(-6, 0)">
              <circle cx="294" cy="540" r="36" fill="#3A3335"/>
              <path class="dragTip" d="M315.5,556.76,299.24,540.5l16.26-16.26,36.26,16.26Z" fill="#3A3335"/>
              <text class="label" x="294" y="551">100</text>
      <!--  <path id="dragShine" d="M330,540c-26,2-18-44-72,0a36,36,0,0,1,72,0Z" fill="#E9E9E9" opacity="0.052"/>    -->    
            </g>       
           
          
       <g mask="url(#gradMask)">
              <use xlink:href="#tube" fill="url(#liquidGrad)" />
        </g>
        <line class="tubeShine" x1="371" y1="200" x2="371" y2="443" fill="none" stroke="#FFF" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8" opacity="0.21" stroke-dasharray="153 30" stroke-dashoffset="-20"/>
       <!--        <text class="tubeLabel" x="400" y="180">100°</text>
              <text class="tubeLabel" x="400" y="356">50°</text>
              <text class="tubeLabel" x="400" y="540">0°</text> -->
            <g class="measurements" fill="none" stroke="#FCEFD6" stroke-width="3" stroke-linecap="round" opacity="1">
              <line x1="358" y1="196" x2="370" y2="196" />
              <line x1="358" y1="234" x2="370" y2="234" />
              <line x1="358" y1="273" x2="370" y2="273" />
              <line x1="358" y1="311" x2="370" y2="311" />
              <line x1="358" y1="350" x2="370" y2="350" />
              <line x1="358" y1="388" x2="370" y2="388" />
              <line x1="358" y1="426" x2="370" y2="426" />
              <line x1="358" y1="465" x2="370" y2="465" />
              <line x1="358" y1="503" x2="370" y2="503" />
            </g>
           
      <!--  <rect class="tubeShine" x="372" y="162" width="56" height="364.02" rx="31.5" ry="31.5" fill="none" stroke="#fff" stroke-miterlimit="10" stroke-width="8" stroke-linecap="round" stroke-dasharray="15 30" opacity="0.31"/> -->
        <circle class="follower" cx="400" cy="540" r="0" fill="#62B6CB" fill-opacity="1" stroke="#FCEFD6" stroke-width="0"/>
      
           
       
           
       </g>   
      </svg>
      
      
  <script src='../assets/js/temp_slider.js'></script> 
</body>

</html>
